<template>
  <div class="bigBox">
    <el-container>
      <el-header style="background-color: blueviolet">Header</el-header>
      <el-main>
        <div class="box">
          <div class="box1">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px"
                ><div class="grid-content ep-bg-purple-dark" />
                <el-button type="primary">全部商品(1000)</el-button>
                <el-button>已上线(1000)</el-button>
                <el-button>未上线(1000)</el-button>
              </el-col>
              <el-col :span="24" style="position: relative; margin-bottom: 15px"
                ><div class="grid-content ep-bg-purple-dark" />
                <el-input
                  v-model="nameInput"
                  placeholder="
  商品名称/商品编号"
                  style="width: 214px"
                />
                <el-select
                  v-model="classInput"
                  class="m-2"
                  placeholder="请选择商品分类"
                  style="margin-left: 15px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="typeInput"
                  class="m-2"
                  placeholder="请选择商品类型"
                  style="margin-left: 15px"
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <div style="position: absolute; right: 0px; top: 0px">
                  <el-button type="primary">查询</el-button>
                  <el-button @click="goodsAdd">添加商品</el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <el-table :data="goodsList" border style="width: 100%">
                  <el-table-column type="selection" width="55" />
                  <el-table-column
                    prop="goodsId"
                    label="编号"
                    width="180"
                    align="center"
                  />
                  <el-table-column label="商品图片" width="180" align="center">
                    <template #default="scope">
                      <img
                        style="width: 100px; height: 100px"
                        src="../../styles/商品图片/哑铃.png"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="goodsName"
                    label="商品名称"
                    align="center"
                  />
                  <el-table-column
                    prop="goodsPrice"
                    label="价格"
                    align="center"
                  />
                  <el-table-column prop="goodsUp" label="上线" align="center" />
                  <el-table-column
                    prop="goodsLabel"
                    label="标签"
                    align="center"
                  />
                  <el-table-column
                    prop="goodsSales"
                    label="销量"
                    align="center"
                  />
                  <el-table-column
                    prop="goodHandle"
                    label="操作"
                    align="center"
                  >
                    <template #default="scope">
                      <el-button type="text" size="mini" @click="goodsEdit"
                        >编辑</el-button
                      >
                      <el-button
                        type="text"
                        size="mini"
                        @click="deleteDia = true"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col
                :span="24"
                style="display: flex; justify-content: flex-end"
              >
                <el-pagination
                  small
                  background
                  layout="prev, pager, next"
                  :total="goodsList.length"
                  class="mt-4"
              /></el-col>
            </el-row>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 删除模态框 -->
    <el-dialog
      v-model="deleteDia"
      title="确认提示"
      width="30%"
      :before-close="handleClose"
    >
      <div style="display: flex">
        <div style="display: flex; align-items: center">
          <img
            src="../../styles/商品图片/正确.png"
            alt=""
            style="position: relative"
          />
          <img
            src="../../styles/商品图片/勾.png"
            alt=""
            style="position: absolute; left: 29px; top: 120px"
          />
        </div>
        <div style="margin-left: 20px">
          <p style="font-size: 16px; font-weight: 700; color: #666666">
            系统提示
          </p>
          <p style="font-size: 14px; font-weight: 400; color: #999999">
            确定要删除该商品吗？
          </p>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDia = false">取消</el-button>
          <el-button type="primary" @click="deleteDia = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const nameInput = ref("");
const classInput = ref("");
const typeInput = ref("");
const options = [
  {
    value: "Option1",
    label: "杠铃",
  },
  {
    value: "Option1",
    label: "跑步机",
  },
  {
    value: "Option1",
    label: "腹肌板",
  },
  {
    value: "Option1",
    label: "动感单车",
  },
];
const options1 = [
  {
    value: "Option1",
    label: "Option1",
  },
];
// 删除模态框
const deleteDia = ref(false);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("是否取消操作?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
//编辑
const goodsEdit = () => {
  router.push("/mainView/ListGoods/GoodsEdit");
};
const goodsList = [
  {
    goodsId: "1",
    goodsImg: "../../styles/商品图片/哑铃.png",
    goodsName: "健身哑铃",
    goodsPrice: "100.00",
    goodsUp: "已上线",
    goodsLabel: "无",
    goodsSales: "100",
  },
  {
    goodsId: "2",
    goodsImg: "../../styles/商品图片/哑铃.png",
    goodsName: "健身哑铃",
    goodsPrice: "100.00",
    goodsUp: "已上线",
    goodsLabel: "无",
    goodsSales: "100",
  },
  {
    goodsId: "3",
    goodsImg: "../../styles/商品图片/哑铃.png/商品列表/u7716.png",
    goodsName: "健身哑铃",
    goodsPrice: "100.00",
    goodsUp: "已上线",
    goodsLabel: "无",
    goodsSales: "100",
  },
  {
    goodsId: "4",
    goodsImg: "../../styles/商品图片/哑铃.png/商品列表/u7716.png",
    goodsName: "健身哑铃",
    goodsPrice: "100.00",
    goodsUp: "已上线",
    goodsLabel: "无",
    goodsSales: "100",
  },
  {
    goodsId: "5",
    goodsImg: "../../styles/商品图片/哑铃.png/商品列表/u7716.png",
    goodsName: "健身哑铃",
    goodsPrice: "100.00",
    goodsUp: "已上线",
    goodsLabel: "无",
    goodsSales: "100",
  },
  {
    goodsId: "6",
    goodsImg: "../../styles/商品图片/哑铃.png/商品列表/u7716.png",
    goodsName: "健身哑铃",
    goodsPrice: "100.00",
    goodsUp: "已上线",
    goodsLabel: "无",
    goodsSales: "100",
  },
];
const goodsAdd = () => {
  router.push("/mainView/ListGoods/GoodsAdd");
};
</script>

<style scoped>
.bigBox {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.box {
  background-color: #fff;
  padding: 50px, 0px;
  border-radius: 5px;
}
.box1 {
  padding: 15px;
}
</style>
